<template>
  <div>
    <a-spin :spinning="spinning" :delay="delayTime" tip="Loading...">
      <a-row>
        <a-col :span="24">
          <a-card :bordered="false" style="margin-bottom: 10px">
            <a-form-model ref="form" :model="approveRecord" :rules="rules" slot="title">
              <a-row v-if="regionId">
                <a-col :span="16" style="height: 10px; margin-right: 10px">
                  <a-form-model-item prop="reason">
                    <a-select
                      style="width: 100%"
                      show-search
                      :allowClear="true"
                      :value="approveRecord.reason"
                      placeholder="审核原因"
                      :default-active-first-option="false"
                      :show-arrow="false"
                      :filter-option="false"
                      :not-found-content="fetching ? undefined : null"
                      @focus="handleFocus"
                      @search="handleSearch"
                      @change="handleChange"
                      @blur="handleBlur"
                    >
                      <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                      <a-select-option v-for="(d, index) in reasonList" :key="index">
                        {{ d }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="6">
                  <a-space>
                    <a-button type="primary" icon="check" @click="submitForm(true)"> 通过 </a-button>
                    <a-button type="danger" icon="close" @click="submitForm(false)"> 拒绝 </a-button>
                  </a-space>
                </a-col>
              </a-row>
            </a-form-model>
            <a-descriptions :column="4" bordered>
              <a-descriptions-item v-for="(item, index) in regionColumns" :key="index" :label="item.title" :span="item.span">
                {{ item.scopedSlots === undefined ? region[item.dataIndex] : execDynamicMethod(item.scopedSlots) }}
              </a-descriptions-item>
              <a-descriptions-item label="运营者信息" :span="2">
                <a-popover
                  title="用户信息"
                  :getPopupContainer="
                    triggerNode => {
                      return triggerNode.parentNode || document.body
                    }
                  "
                >
                  <template slot="content">
                    <div v-if="user.name">
                      <p>姓名：{{ user.name ? user.name : '无' }}</p>
                      <p>账号：{{ user.userName ? user.userName : '无' }}</p>
                    </div>
                    <a-empty v-else />
                  </template>
                  <a-button type="link">移入显示 </a-button>
                </a-popover>
              </a-descriptions-item>
              <a-descriptions-item label="部门信息" :span="2">
                <a-popover
                  title="部门信息"
                  :getPopupContainer="
                    triggerNode => {
                      return triggerNode.parentNode || document.body
                    }
                  "
                >
                  <template slot="content">
                    <div v-if="depart.deptName">
                      <p>部门：{{ depart.deptName ? depart.deptName : '无' }}</p>
                      <p>负责人：{{ depart.leader ? depart.leader : '无' }}</p>
                    </div>
                    <a-empty v-else />
                  </template>
                  <a-button type="link"> 移入显示 </a-button>
                </a-popover>
              </a-descriptions-item>
              <a-descriptions-item v-for="(item, index) in imageColumns" :key="index" :label="item.title" :span="item.span">
                <image-upload v-model="region.avatar" :disabled="true" :number="1" />
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>
      </a-row>
      <a-collapse :bordered="false" expandIconPosition="left" v-model="activeKey">
        <template #expandIcon="props">
          <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
        </template>
        <a-collapse-panel key="regionMap" header="展开地区地图" :style="customStyle" v-if="regionMap.name">
          <a-row>
            <a-col a-col :span="24">
              <t-x-map v-model="regionMap" :disabled="true" :showSearch="false" :ipFlag="false"></t-x-map>
              <a-descriptions :column="4" bordered layout="vertical">
                <a-descriptions-item v-for="(item, index) in regionMapColumns" :key="index" :label="item.title">
                  {{ regionMap[item.dataIndex] }}
                </a-descriptions-item>
              </a-descriptions>
            </a-col>
          </a-row>
        </a-collapse-panel>
      </a-collapse>
      <a-row>
        <a-col a-col :span="24">
          <a-card :bordered="false" title="地区版块" style="margin-bottom: 10px">
            <a-menu mode="horizontal">
              <a-menu-item v-for="(item, index) in sectionList" :key="index">{{ item.name }}</a-menu-item>
            </a-menu>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
import { getRegionDetail, approveRegion } from '@/api/platform/region'
import { listPlatformConfig } from '@/api/platform/platformConfig'
import { getUser } from '@/api/system/user'
import { getDept } from '@/api/system/dept'
import RegionApprove from './RegionApprove'
import Area from '@/components/_util/Area'
import ImageUpload from '@/components/pt/imageUpload/ImageUpload'
import TXMap from '@/components/pt/txmap/TXMap'
export default {
  name: 'RegionDetail',
  props: {
    regionId: {
      type: String,
      required: false
    },
    typeOptions: {
      type: Array,
      required: true
    },
    isPrivateOptions: {
      type: Array,
      required: true
    },
    statusOptions: {
      type: Array,
      required: true
    }
  },
  components: {
    ImageUpload,
    TXMap
  },
  data() {
    return {
      spinning: false,
      delayTime: 100,
      regionMapShow: true,
      region: {},
      regionMap: {},
      sectionList: [],
      user: {},
      depart: {},
      reasonList: [],
      fetching: false,
      approveRecord: {
        itemId: undefined,
        reason: undefined,
        type: undefined
      },
      regionColumns: [
        {
          title: '地区名称',
          dataIndex: 'name',
          span: 4,
          scopedSlots: undefined
        },
        {
          title: '地区编码',
          dataIndex: 'code',
          span: 2,
          scopedSlots: undefined
        },
        {
          title: '地区类型',
          dataIndex: 'type',
          span: 2,
          scopedSlots: 'typeFormat'
        },

        {
          title: '地区简称',
          dataIndex: 'abbreviation',
          span: 2,
          scopedSlots: undefined
        },
        {
          title: '地区省份',
          dataIndex: 'province',
          span: 2,
          scopedSlots: 'getProvinceFormat'
        },

        {
          title: '私有状态',
          dataIndex: 'isPrivate',
          span: 2,
          scopedSlots: 'isPrivateFormat'
        },
        {
          title: '状态',
          dataIndex: 'status',
          span: 2,
          scopedSlots: 'statusFormat'
        }
      ],
      imageColumns: [
        {
          title: '地区头像',
          dataIndex: 'avatar',
          span: 2
        },
        {
          title: '朋友圈二维码',
          dataIndex: 'momentImage',
          span: 2
        },
        {
          title: '公众号二维码',
          dataIndex: 'officialAccountImage',
          span: 2
        },
        {
          title: '收款码',
          dataIndex: 'receiveMoneyImage',
          span: 2
        }
      ],
      regionMapColumns: [
        {
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '纬度',
          dataIndex: 'longitude'
        },
        {
          title: '经度',
          dataIndex: 'latitude'
        },
        {
          title: '范围半径',
          dataIndex: 'range'
        },
        {
          title: '缩放等级',
          dataIndex: 'scale'
        },
        {
          title: '纵向偏移量',
          dataIndex: 'longitudinalOffset'
        },
        {
          title: '横向偏移量',
          dataIndex: 'lateralOffset'
        },
        {
          title: '文本边缘留白',
          dataIndex: 'padding'
        }
      ],
      rules: {
        reason: [{ required: true, message: '审核原因不能为空', trigger: 'blur' }]
      },
      pcaData: '',
      activeKey: ['regionMap'],
      customStyle: 'background: #fff;ssborder-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden'
    }
  },
  watch: {
    regionId: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.init()
        } else {
          this.reset()
        }
      }
    }
  },
  created() {
    this.pcaData = new Area()
  },
  methods: {
    ...RegionApprove.methods,
    reset() {
      this.approveRecord = {
        itemId: undefined,
        reason: undefined,
        type: undefined
      }
      this.user = {}
      this.depart = {}
      this.region = {}
      this.regionMap = {}
      this.sectionList = []
    },
    submitForm(flag) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.approveRecord.itemId = this.regionId
          if (flag) {
            this.approveRecord.type = '0'
          } else {
            this.approveRecord.type = '1'
          }
          const saveForm = JSON.parse(JSON.stringify(this.approveRecord))
          approveRegion(saveForm).then(response => {
            this.$message.success('审核成功', 3)
            this.$emit('getList')
          })
        }
      })
    },
    handleBlur(value) {
      this.approveRecord.reason = value
    },
    handleChange(value) {
      this.approveRecord.reason = this.reasonList[value]
    },
    handleSearch(value) {
      this.approveRecord.reason = value
    },
    handleFocus() {
      const queryParam = {
        pageNum: 1,
        pageSize: 10,
        key: 'approve_reason',
        status: '0'
      }
      this.fetching = !this.fetching
      listPlatformConfig(queryParam).then(response => {
        const reason = response.data.rows[0]
        this.reasonList = reason.valueString.split(',')
        this.fetching = !this.fetching
      })
    },
    execDynamicMethod(method) {
      return this[method](this.region)
    },
    init() {
      this.spinning = !this.spinning
      this.regionMap = {}
      this.$refs.form.resetFields()
      getRegionDetail(this.regionId).then(response => {
        this.region = response.data.region
        this.getRelevanceInfo()
        this.regionMap = response.data.regionMap
        if (!this.regionMap) this.regionMap = {}
        this.sectionList = response.data.sectionList
        this.spinning = !this.spinning
      })
    },
    getRelevanceInfo() {
      if (this.region.userId !== null) {
        getUser(this.region.userId).then(res => {
          this.user = res.data
        })
      }
      if (this.region.departId !== null) {
        getDept(this.region.departId).then(res => {
          this.depart = res.data
        })
      }
    }
  }
}
</script>

<style></style>
